<template>
	<div class="container">
		<search-date @getChangeTime="getChangeTime" :initTimeDatas="initTimeDatas"></search-date>
		<Department @getdepartcode="getDepartCode"></Department>
		<section class="data">
			<!-- v-for -->
			<div>
				<h2>源检查数</h2>
				<h3>{{ titleData.source_exam_cnt }}</h3>
			</div>
			<div>
				<h2>已采集质量数</h2>
				<h3>{{ titleData.archive_exam_cnt}}</h3>
			</div>
			<div>
				<h2>检查差异数</h2>
				<h3>{{ titleData.exam_difference_cnt}}</h3>
			</div>
			<div>
				<h2>已采集影像数</h2>
				<h3>{{titleData.archive_image_cnt}}</h3>
			</div>
			<div>
				<h2>影像差异数</h2>
				<h3>{{titleData.image_difference_cnt}}</h3>
			</div>
			<div>
				<h2>影像校对失败数</h2>
				<h3>{{titleData.verify_error_cnt}}</h3>
			</div>
			<div>
				<h2>影像未校对数</h2>
				<h3>{{titleData.no_verify_cnt}}</h3>
			</div>
			<div>
				<h2>已采集胶片数</h2>
				<h3>{{titleData.archive_film_cnt}}</h3>
			</div>
			<div>
				<h2>胶片差异数</h2>
				<h3>{{titleData.film_difference_cnt}}</h3>
			</div>
		</section>
		<el-table :data="tableData" size="small" stripe style="width: 100%" show-summary :span-method="objectSpanMethod">
			<el-table-column label="机构类型" prop="district" align="left"></el-table-column>
			<el-table-column label="医疗机构" prop="org_name" align="left" width="150px"></el-table-column>
			<el-table-column prop="source_exam_cnt" label="源检查数" align="left">
			</el-table-column>
			<el-table-column prop="archive_exam_cnt" label="已采集检查数" align="left">
			</el-table-column>
			<el-table-column prop="exam_difference_cnt" label="检查差异数" align="left"></el-table-column>
			<el-table-column prop="archive_image_cnt" label="已采集影像数" align="left"></el-table-column>
			<el-table-column prop="image_difference_cnt" label="影像差异数" align="left"></el-table-column>
			<el-table-column prop="verify_error_cnt" label="影像校对失败数" align="left"></el-table-column>
			<el-table-column prop="no_verify_cnt" label="影像未校对数" align="left"></el-table-column>
			<el-table-column prop="archive_film_cnt" label="已采集胶片数" align="left"></el-table-column>
			<el-table-column prop="film_difference_cnt" label="胶片差异数" align="left"></el-table-column>
		</el-table>

	</div>
</template>

<script>
import searchDate from '@/components/common/searchDate'
import Department from '@/components/common/Department'
import { groupBy, clone, compareArray, objSum } from '@/utils/base.js'
import { get_region_quality } from 'api/admin'
export default {
	name: 'collQuality',
	components: {
		searchDate,
		Department,
	},
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				depart_code: null,
				start_date: null,
				end_date: null,
			},
			initTimeDatas: [
				{
					text: '总计',
					code: 'allTime',
				},
				{
					text: '最近半年',
					code: 'lastHalfYear',
				},
				{
					text: '最近一年',
					code: 'lastOneYear',
				},
			],
			titleData: {
				source_exam_cnt: 0,
				archive_exam_cnt: 0,
				exam_difference_cnt: 0,
				archive_image_cnt: 0,
				image_difference_cnt: 0,
				verify_error_cnt: 0,
				no_verify_cnt: 0,
				archive_film_cnt: 0,
				film_difference_cnt: 0,
			},
			tableData: [],
			total: null,
			listLoading: false,
			rowIndex: '-1',
			OrderIndexArr: [],
			hoverOrderArr: []
		}
	},
	computed: {},
	created () {
		this.getList()
	},
	mounted () {
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			this.listQuery = Object.assign( this.listQuery, val )
			this.getList()
		},
		getDepartCode ( val ) {
			console.log( val )
			this.listQuery.depart_code = val
			this.getList()
		},
		getList () {
			get_region_quality( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					// todo 数据处理
					let data = clone( res.data ),
						_data = []
					data.map( item => {
						let obj = {}
						let list = item.detail_list
						list.map( ite => {
							ite.district = item.district
							ite.district_code = item.district_code
							_data.push( ite )
						} )
					} )
					console.log( _data )
					let resultData = _data.sort( compareArray( 'district' ) )
					this.tableData = resultData
					this.getOrderNumber()
					// 求和
					this.titleData = objSum( resultData, 'source_exam_cnt', 'archive_exam_cnt', 'exam_difference_cnt', 'archive_image_cnt', 'image_difference_cnt', 'verify_error_cnt', 'no_verify_cnt', 'archive_film_cnt', 'film_difference_cnt' )
					console.log( resultData );
					console.log( this.titleData );
				}
			} )
		},
		//表格合并
		getOrderNumber () {
			console.log( '>>>>>>>>>>>>>>>>' );
			let OrderObj = {}
			this.tableData.forEach( ( element, index ) => {
				element.rowIndex = index
				if ( OrderObj[ element.district_code ] ) {
					OrderObj[ element.district_code ].push( index )
				} else {
					OrderObj[ element.district_code ] = []
					OrderObj[ element.district_code ].push( index )
				}
			} )

			// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
			for ( let k in OrderObj ) {
				if ( OrderObj[ k ].length > 1 ) {
					this.OrderIndexArr.push( OrderObj[ k ] )
				}
			}
		},
		// 合并单元格
		objectSpanMethod ( {
			row,
			column,
			rowIndex,
			columnIndex
		} ) {
			if ( columnIndex === 0 ) {
				for ( let i = 0; i < this.OrderIndexArr.length; i++ ) {
					let element = this.OrderIndexArr[ i ]
					for ( let j = 0; j < element.length; j++ ) {
						let item = element[ j ]
						if ( rowIndex == item ) {
							if ( j == 0 ) {
								return {
									rowspan: element.length,
									colspan: 1
								}
							} else if ( j != 0 ) {
								return {
									rowspan: 0,
									colspan: 0
								}
							}
						}
					}
				}
			}
		},
	}

}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
}
.data {
	// height: 161px;
	padding: 43px 0;
	box-shadow: 0px 0px 14px 0px rgba(1, 1, 100, 0.1);
	border-radius: 8px;
	margin-bottom: 42px;
	div {
		height: 75px;
		width: 11%;
		display: inline-block;
		border-right: 1px solid #ddd;
		text-align: left;
		h3,
		h2 {
			margin-left: 40px;
		}
		h2 {
			font-size: 16px;
			font-weight: normal;
			line-height: 22px;
			color: #333333;
		}
		h3 {
			font-size: 30px;
			font-weight: 500;
			line-height: 42px;
			color: @49B523;
		}
	}
	> :last-child {
		border: none !important;
	}
	> :last-child,
	> :nth-child(5) {
		h3 {
			color: @FF6F6F;
		}
	}
	> :nth-child(6) {
		h3 {
			color: @333;
		}
	}
}
</style>
